<template>
    <el-form :rules="resetForm.rules" class="login-container" label-position="left"
             :model="resetForm.form" label-width="120px" ref="rForm" v-loading="resetForm.loading">
        <h3 class="login_title">用户重置密码</h3>
        <el-form-item label="新密码" prop="password">
            <el-input type="password" v-model="resetForm.form.password" autocomplete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="rePassword">
            <el-input type="password" v-model="resetForm.form.rePassword" autocomplete="off" placeholder="确认新密码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input type="email" v-model="resetForm.form.email" autocomplete="off" placeholder="请输入你绑定的邮箱"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="emailVerifyCode">
            <el-input type="text"
                      v-model="resetForm.form.emailVerifyCode"
                      autocomplete="off" placeholder="验证码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
                       :disabled="!resetForm.doEmailVerifyCode"
                       @click="getResetPasswordEmailCode()">获取验证码
                <span v-show="!resetForm.doEmailVerifyCode">{{resetForm.count}} s</span>
            </el-button>
            <el-button type="primary" @click="resetPass">确定</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data(){
            const validateRePass = (rule, value, callback) => {
                if (value !== this.resetForm.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                }else {
                    callback();
                }
            };
            return {
                resetForm: {
                    loading: false,
                    form:{
                        password: '',
                        rePassword: '',
                        email:'',
                        emailVerifyCode:''
                    },
                    rules: {
                        password: [
                            { required: true, message: '请输入新密码', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' },
                        ],
                        rePassword: [
                            { required: true, message: '请输入确认密码', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' },
                            { validator: validateRePass, trigger: 'blur' }
                        ],
                        emailVerifyCode:[
                            { required: true, message: '请输入验证码', trigger: 'blur' }
                        ],
                        email: [
                            { required: true, message: '邮箱', trigger: 'blur' },
                            { type: 'email', message: '邮箱格式不符'}
                        ],
                    },
                    doEmailVerifyCode:true,
                    count:'',
                    timer: null,
                },
            }
        },
        methods:{
            resetPass(){
                const _this = this;
                this.$refs.rForm.validate((valid) => {
                    if (valid) {
                        let params={
                            password: _this.resetForm.form.password,
                            email:_this.resetForm.form.email,
                            emailVerifyCode:_this.resetForm.form.emailVerifyCode
                        };
                        _this.resetForm.loading=true;
                        _this.putRequestJson("/user/resetpass",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    //更新用户邮箱信息
                                    _this.resetForm.loading=false;
                                    _this.resetForm.visible=false;
                                    //清空数据
                                    _this.resetForm.form={
                                        password: '',
                                        rePassword: '',
                                        email:'',
                                        emailVerifyCode:''
                                    };
                                    _this.$message.success("重置密码成功");
                                    _this.$router.push('/login');
                                }else{
                                    _this.resetForm.loading=false;
                                }
                            })
                    }
                });
            },
            getResetPasswordEmailCode(){
                this.$refs.rForm.validateField("email",(emailError)=>{
                    console.log('邮箱错误: '+emailError);
                    if (!emailError){
                        let params={
                            emailType:2,
                            email:this.resetForm.form.email
                        };
                        const TIME_COUNT = 60; //更改倒计时时间
                        if (!this.resetForm.timer) {
                            this.resetForm.count = TIME_COUNT;
                            this.resetForm.doEmailVerifyCode = false;
                            this.resetForm.timer = setInterval(() => {
                                console.log("计时器");
                                if (this.resetForm.count > 0 && this.resetForm.count <= TIME_COUNT) {
                                    this.resetForm.count--;
                                } else {
                                    this.resetForm.doEmailVerifyCode = true;
                                    clearInterval(this.resetForm.timer); // 清除定时器
                                    this.resetForm.timer = null;
                                }
                            }, 1000);
                        }
                        this.getRequest("/mail/emailvcodeForResetPass",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    const data = resp.data;
                                    console.log(data);
                                }
                            })
                    }
                })
            }
        }
    }
</script>
<style  scoped>
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .login_remember {
        margin: 0px 0px 35px 0px;
        text-align: left;
    }
</style>